<template>
    <view class="content">
        <u-navbar :background="background" title="分享海报" title-color="#000" :border-bottom="false" :immersive="true"
            :is-back="true" back-icon-color="#000"></u-navbar>
        
        <view class="box">
            <image :src="data.url" mode="widthFix"></image>
            <view class="btns">
                <view class="btn-l" @click="doDownload">
                    <image src="../../static/icon/s_icon_05.png" class="s-icon-05"></image>
                    <view>保存</view>
                </view>
                <button open-type="share" class="share-button">
                	<image src="../../static/icon/s_icon_06.png" class="s-icon-05"></image>
                	<view>分享</view>
                </button>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
                data: {},
            };
        },
        onShareAppMessage(res) {
        	let _this = this
        	return {
        		title: '伙伴在线',
                imageUrl: _this.data,
                path: '/pages/tabbar/index?parentID=' + _this.$getSync('userId')
        	}
        },
        onLoad() {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
            
            this.getData()
        },
        methods: {
            doDownload() {
            	var _this = this;
            	uni.downloadFile({
            		url: _this.data.url,
            		success: (res) => {
                        // console.log(res)
            			if (res.statusCode == 200) {
            				uni.saveImageToPhotosAlbum({ 
            					filePath: res.tempFilePath,
            					success: (res) => {
            						_this.$toast('保存成功');
            					},
            					fail: (err) => {
            						_this.$toast('保存失败');
            					}
            				});
            			} else if (res.cancel) {
                            
            			}
            		}
            	});
            },
            
            getData() {
            	this.$ajax('share_poster', {
            		user_token: this.$getSync('userToken'),
            	}).then(ret => {
            		if (ret.success == 1000) {
            			this.data = ret.detail
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
                this.background.backgroundColor = 'rgba(255,255,255,1)';
            	// if (e.scrollTop == 0) {
            	// 	this.background.backgroundColor = 'rgba(0,0,0,0)';
            	// } else {
            	// 	this.background.backgroundColor = 'rgba(0,0,0,' + a + ')';
            	// }
            },
        }
    };
</script>

<style lang="scss">
    
    
    page{
        background-color: #fff;
    }
    .box{
        position: relative;
    }
    .btns{
        width: 100vw;
        padding: 0 45rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        bottom: 30rpx;
        left: 0;
        z-index: 1;
    }
    .btns>view{
        width: 310rpx;
        height: 80rpx;
        font-size: 30rpx;
        border-radius: 15rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .btn-l{
        color: #fff;
        background-color: #f29700;
    }
    .btn-r{
        color: #fec427;
        background-color: #20212c;
    }
    .share-button {
        width: 310rpx;
        height: 80rpx;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	font-size: 30rpx;
        background: #20212c !important;
    	color: #fec427;
        border-radius: 15rpx;
    
    	&:after {
    		border: none;
    	}
    }
    .s-icon-05{
        width: 32rpx;
        height: 32rpx;
        margin-right: 20rpx;
    }

</style>
